<template>
  <div id="SetTing">
    <el-card class="box-card">
      <el-tabs value="first">
        <el-tab-pane label="处理中心" name="first">
          <br />
          <br />
          <br />
          <br />
          <el-form
            ref="formdata"
            :inline="true"
            :model="formdata"
            label-width="150px"
          >
            <el-row :gutter="20">
              <el-col :span="7">
                <el-form-item
                  label="账号:"
                  porp="account"
                  style="margin-left: 50px;"
                >
                  <el-input v-model="formdata.account" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item
                  label="姓名:"
                  porp="name"
                  style="margin-left: 50px;"
                >
                  <el-input v-model="formdata.name" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item
                  label="联系方式:"
                  porp="phone"
                  style="margin-left: 50px;"
                >
                  <el-input v-model="formdata.phone" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="17" :offset="17">
                <el-button type="primary" size="medium" @click="onSubmit"
                  >查询</el-button
                >
                <el-button size="medium" @click="reset">重置</el-button>
                <el-dropdown>
                  <span
                    class="el-dropdown-link"
                    style="margin-left: 10px; color: #1990ff;"
                  >
                    展开<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>黄金糕</el-dropdown-item>
                    <el-dropdown-item>狮子头</el-dropdown-item>
                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-button type="primary" @click="addsetting">+新增</el-button>
              </el-col>
            </el-row>
          </el-form>
          <template>
            <br />
            <el-table :data="list" style="width: 100%;" class="table">
              <el-table-column type="selection" width="55" fixed />
              <el-table-column prop="account" label="账号" width="150" fixed />
              <el-table-column prop="name" label="姓名" width="200" />
              <el-table-column prop="phone" label="联系电话" width="300" />
              <el-table-column prop="position" label="职位" width="300" />
              <el-table-column
                prop="state"
                label="状态"
                width="250"
                icon="el-icon-d-caret"
              />
              <!-- slot-scope="{ row }" -->
              <el-table-column
                prop="date"
                label="操作"
                width="200"
                fixed="right"
              >
                <template slot-scope="{ row }">
                  <el-button type="text" size="small" @click="editdata(row)"
                    >编辑</el-button
                  >
                  <el-button type="text" size="small">重置密码</el-button>
                  <el-button type="text" size="small">停用/</el-button>
                  <el-button type="text" size="small" @click="deldata(row.id)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
          <!-- 分页 -->
          <el-row :gutter="20">
            <el-col :span="15">
              <span>
                共{{ total }}条记录 第{{ this.page.page }}/{{
                  Math.ceil(total / this.page.size)
                }}页
              </span>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <el-pagination
                  background
                  :current-page="page.page"
                  :page-size="page.size"
                  layout="prev,pager, next,sizes, jumper"
                  :page-sizes="[5, 10, 15, 20]"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="changePage"
                />
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="个人商圈" name="second">
          <div class="Tips">
            <h4><i class="el-icon-info" />帮助提示</h4>
            <h5>你所提交的信息已经审核通过，请及时到XXX注册编码</h5>
            <a href="#">前往注册</a>
          </div>
          <div>
            <el-row :gutter="20" style="display: flex; align-items: center;">
              <el-col :span="3">
                店铺订单抽取比例
              </el-col>
              <el-col :span="8" style="margin-right: 100px;">
                <el-slider show-input />
              </el-col>
            </el-row>
            <el-row :gutter="20" style="display: flex; align-items: center;">
              <el-col :span="3">
                用户素材抽取比例
              </el-col>
              <el-col :span="8">
                <el-slider show-input />
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <div>
      <add-setting
        v-if="dialogVisible"
        :showadd.sync="dialogVisible"
        :dates="currentData"
        @changedialog="showding"
      />
    </div>
    <div />
  </div>
</template>

<script>
import { getsetting, delsetting, iqesetting } from '@/api/setting'
import AddSetting from './components/add-setting'
export default {
  name: 'SetTing',
  components: {
    AddSetting
  },
  data() {
    return {
      dialogVisible: false, // 弹出层的隐藏
      list: [],
      total: 0,
      page: {
        page: 1, // 当前页码
        size: 5 // 总数
      },
      formdata: {
        account: '', // 账号
        name: '', // 姓名
        phone: '' // 手机号码
      },
      currentData: {}
    }
  },
  created() {
    this.getsetting()
  },
  methods: {
    // 渲染列表
    async getsetting() {
      const res = await getsetting(this.page)
      console.log('111', res)
      this.list = res.data
      this.total = res.headers['x-total-count'] - 0
    },

    // 查询
    async onSubmit() {
      if (this.formdata.account) {
        const { data } = await iqesetting({ account: this.formdata.account })
        console.log(data, 'gg')
        this.list = data
      } else if (this.formdata.name) {
        const { data } = await iqesetting({
          name: this.formdata.name
        })
        console.log(data, 'gg2')
        this.list = data
      } else if (this.formdata.phone) {
        const { data } = await iqesetting({
          phone: this.formdata.phone
        })
        console.log(data, 'gg4')
        this.list = data
      } else if (
        this.formdata.account &&
        this.formdata.name &&
        this.formdata.phone
      ) {
        const { data } = await iqesetting()
        console.log(data, 'gg3')
        this.list = data
      } else {
        this.getsetting()
      }
    },

    // 重置
    reset() {
      this.formdata = {
        account: '',
        name: '',
        phone: ''
      }
    },

    // 新增
    addsetting() {
      this.currentData = {}
      this.dialogVisible = true
      console.log('111')
    },

    // 编辑
    editdata(data) {
      console.log(data, 'data')
      this.dialogVisible = true
      this.currentData = data
      this.data = data
      console.log('222')
    },

    // 定义关闭弹窗
    showding(valus) {
      this.showDialog = valus
    },

    // 删除
    async deldata(id) {
      try {
        await this.$confirm('确定要删除员工吗？')
        await delsetting(id)
        await this.getsetting()
        alert('111')
        this.$message.success('删除员工成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 分页跳转
    changePage(newPage) {
      this.page.page = newPage
      this.getsetting()
    },
    handleSizeChange(val) {
      this.page.size = val
      this.getsetting()
    }
  }
}
</script>

<style lang="less">
body {
  background-color: #f0f2f5;
  .box-card {
    margin: 20px;
    color: #8d8d8d;
  }
  .Tips {
    height: 110px;
    width: 100%;
    background-color: #e6f7ff;
    border-radius: 2px;
    border: 1px solid #bae7ff;
    line-height: 12px;
    padding-left: 50px;
    font-size: 14px;
    a {
      color: #329eff;
    }
    margin-right: 13px;
  }
  .el-col-3 {
    width: 9.5%;
  }
}
</style>
